<template>
  <div ref="print" style="width: 100%;height: 33%; margin: 0 auto">
    <div v-for="(items, index) in list" :key="index + 100" style="page-break-after: always;width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;">
    <!-- page-break-after: always;换页 -->
      <div v-for="(item, index) in items.arr" :key="index" style="width: 47%;height: 342px;margin: 10px 5px;border: dashed 1px #000; padding: 5px;">
        <div v-if="item.appId == 'beijing'">
          <div style="display: flex;align-items: center;margin-bottom: 5px;justify-content: center;">
            <!-- <div style="font-size: 12px;">返件仓库：{{ item.warehouse }}</div> -->
            <div><img :src="item.logo" width="200px" height="15px"/></div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">经销商：{{ item.dealer }}</div>
            <div style="font-size: 12px;">特约店名称：{{ item.dealerName }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">车型：{{ item.model }}</div>
            <div style="font-size: 12px;">VIN码：{{ item.vin }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">购车日期：{{ item.purchaseDate }}</div>
            <div style="font-size: 12px;">维修日期：{{ item.repairDate }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">行驶里程：{{ item.mileage }}</div>
            <div style="font-size: 12px;">索赔单号：{{ item.claimNo }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">配件号：{{ item.partsNo }}</div>
            <div style="font-size: 12px;">数量：{{ item.number }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">配件名称：{{ item.partsName }}</div>
            <div style="font-size: 12px;">{{ item.section }}</div>
          </div>
          <div style="margin: 10px 0;">
            <div style="font-size: 12px;">维修说明：{{ item.explainS }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 10px 0;">
            <div style="font-size: 12px;">批量/服务活动编号：</div>
            <div style="font-size: 12px;">{{ item.type }}</div>
          </div>
          <div>
            <img :src="item.codeUrl" style="width:200px;height:50px;display:block;margin:0 auto;" />
          </div>
        </div>
        <div v-else-if="item.appId == 'arcfox'">
           <div style="display: flex;justify-content: center;margin: 7px 0;">
            <div><img :src="item.logo" width="200px" height="25px" /></div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">经销商：{{ item.dealer }}</div>
            <div style="font-size: 12px;">服务站：{{ item.dealerName }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">车型：{{ item.model }}</div>
            <div style="font-size: 12px;">VIN码：{{ item.vin }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">保修起始日期：{{ item.purchaseDate }}</div>
            <div style="font-size: 12px;">维修日期：{{ item.repairDate }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">行驶里程：{{ item.mileage }}</div>
            <div style="font-size: 12px;">索赔单号：{{ item.claimNo }}</div>
            <div style="font-size: 12px;">数量：{{ item.number }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">换上件号：{{ item.changeNo }}</div>
            <div style="font-size: 12px;">换上件：{{ item.change }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">换下件号：{{ item.partsNo }}</div>
            <div style="font-size: 12px;">换下件：{{ item.partsName }}</div>
          </div>
          <!-- <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">供应商名称：{{ item.partsName }}</div>
            <div style="font-size: 12px;">{{ item.section }}</div>
          </div> -->
          <div style="margin: 7px 0;">
            <div style="font-size: 12px;">维修说明：{{ item.explainS }}</div>
          </div>
          <div style="display: flex;justify-content: space-between;margin: 7px 0;">
            <div style="font-size: 12px;">批量/服务活动编号：</div>
            <div style="font-size: 12px;">{{ item.type }}</div>
          </div>
          <div>
            <img :src="item.codeUrl" style="width:200px;height:50px;display:block;margin:0 auto;" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  name: 'templateReturnList',
  props: {//传值 从上一页
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
    isPreview: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD'),
      list: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.handle();
    this.$nextTick(function () {//必须写
      console.log(this.list);
      this.$emit('onPrintTable', this.$refs.print.innerHTML);
    });
    if (this.isPreview) {
      this.fillInToDom();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    handle() {
      let number = Math.ceil(this.data.rows.length / 6);//分页 一页6个
      this.number = number;
      for (let i = 1; i <= number; i++) {
        if (number == i) {
          let obj = {};
          obj.arr = this.data.rows.splice(0, this.data.rows.length);
          obj.index = i;
          this.list.push(obj);
        } else {
          let obj = {};
          obj.arr = this.data.rows.splice(0, 6);//splice会对原数据进行破坏
          obj.index = i;
          this.list.push(obj);
        }
      }
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
